<template>
  <div>
    <el-dialog title="反馈工单"
               :visible.sync="visibleDialog"
               @close="close"
               class="show"
                width="40%"
    >
      <el-tag type="info" center fz-14 class="tip" ww1>
        <span>对象：<i>{{row.city}}</i></span>
        <span style="margin-left: 26px">类型：<i>视频素材</i></span>
      </el-tag>


      <el-form
          :model="form"
          :hide-required-asterisk="true"
      >
        <el-form-item label="" :label-width="formLabelWidth">
          <el-radio v-model="form.radio" label="1">画质模糊</el-radio>
          <el-radio v-model="form.radio" label="2">无法播放或使用</el-radio>
          <el-radio v-model="form.radio" label="3">与描述不符</el-radio>
          <el-radio v-model="form.radio" label="4">其他</el-radio>
          <template v-if="form.radio && cansee">
            <div flex flex-b flex-c class="chara-wap">
              <p class="chakra-text">白羊星传媒, 您好, 我们非常重视您的反馈，您将很快收到回复反馈</p>
             <a href="#/account/feedback" target="_blank">反馈列表</a>
            </div>

            <el-input
                type="textarea"
                :placeholder="`${placeholder[form.radio]}`"
                v-model="form.textarea"
                maxlength="255"
                show-word-limit
                :required="true"
                class="chara-form"
            >
            </el-input>
          </template>
          <template v-if="form.radio && form.radio == 2 && !cansee">
            <div class="tip-content">
              <p fz-16>温馨提示</p>
              <p fz-14>
                视频素材的预览是由原文件转码而成，如预览正常，原视频也应该是好的，建议检查您系统的视频解码器，可尝试通过如下2种方式解决：
              </p>

              <p fz-14>
                1、安装QuickTime和完美解码后通常可以解决
              </p>

              <p fz-14>
                2、使用其他转换软件（转成avi格式mjpeg编码）
              </p>
              <p fz-14 style="color: var(--nav-color)">
                如果以上提示没有帮到您, 请：<span @click="cansee = true" cur>继续提交</span>
              </p>


            </div>
          </template>

        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer" v-show="form.radio">
        <el-button @click="visibleDialog = false">取 消</el-button>
        <el-button type="primary" @click="visibleDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ActionDialog",

  props: {
    visible:{
      type:Boolean,
      default:false
    },

    row:{
      type:Object,
      default: {

      }
    }


  },

  data(){
    return{

      attrData:{

      },

      form: {
        name: '',
        radio: '',
        textarea: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '40px',
      placeholder: {
        1: '请填写您的反馈内容，如情况属实，我们将下架该素材，并让设计师退款给您',
        2: '',
        3: '为避免耽误您使用，请准确描述您的问题，如情况属实，我们将下架该素材，并让设计师退款给您',
        4: '为避免耽误使用，请准确描述您的问题'
      },
      cansee: true

    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible",val);
      }
    }
  },


  created(){
    this.attrData = this.row
    console.log(this.attrData)
  },


  methods:{
    close() {
      this.form.radio = ''
    },
  },

  watch:{
    'form.radio'(v) {
      if(v==2) {
        this.cansee = false
      }else {
        this.cansee = true
      }
    }
  }

}
</script>

<style scoped>
  .tip-content{
    color: var(--grey);
    border-bottom: 1px solid var(--light-gray);
  }
  .tip-content p:first-child, .tip-content span{
    color: var(--green);
  }

  .tip-content p{
    margin: 0;
    padding: 0;
    line-height: 30px;
  }

</style>
